import React from 'react'
import { Divider, Modal, Spin, Tabs, Form, Button, Table } from 'antd'
import { LwjButton } from "components";
import LwjTable from 'components/LwjTable/LwjTable'
import DescriptionList from 'components/DescriptionList';
import moment from 'moment';
import { payOrderStatus, distributionWay } from "utils/enumConfig"
import { sourceSystem } from 'utils/enumConfig';
const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}

const List = ({
  Select,
  currentItem,
  onShowDetail,
  detailVisible,
  dispatch,
  global,
  ...tableProps
}) => {
  const { Description } = DescriptionList;

  const buildPic = (record) => {
    const picArray = new Array(0);
    const contractSummaries = record.contractGoodsSnapshotSummaries;
    if (_.isArray(contractSummaries)) {
      contractSummaries.forEach(element => {
        element.coverPics.forEach(pic => {
          picArray.push(pic)
        })
      });
    }
    return picArray;
  }

  const buildSnapShotMateriel = (record) => {
    const materielArray = new Array(0);
    const materielList = record.materielSnapshotList;
    if (_.isArray(materielList)) {
      materielList.forEach(element => {
        materielArray.push(element.materialCode + "*" + element.materialNum + ";")
      })
    }
    return materielArray
  }

  const snapShotsColumn = [
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '商品物料',
      dataIndex: 'system',
      key: 'system',
      render: (text, record) => {
        return buildSnapShotMateriel(record)
      }
    },
    {
      title: '商品图片',
      dataIndex: 'coverPath',
      key: 'coverPath',
      render: (text, record) => {
        return <img alt="" src={record.coverPath} height={60} width={60} />
      }
    },
    {
      title: '单价',
      dataIndex: 'channelPrice',
      key: 'channelPrice',
    },
    {
      title: '数量',
      dataIndex: 'number',
      key: 'number',
    },
    {
      title: '实付金额',
      dataIndex: 'channelPrice',
      key: 'channelPrice',
    }
  ]


  const buildSourceSystem = (record) => {
    const systems = new Array(0);
    const contractSummaries = record.contractGoodsSnapshotSummaries;
    if (_.isArray(contractSummaries)) {
      contractSummaries.forEach(element => {
        element.systems.forEach(system => {
          systems.push(system + ";")
        })
      });
    }
    return systems;
  }
  const buildTabPane = (record) => {
    if (_.isArray(record)) {
      return record.map((element, index) => {
        debugger;
        return <TabPane key={index + 2} tab={element.contractNum}>
          <Table pagination={false} dataSource={element.goodsSnapshots} columns={snapShotsColumn} />
        </TabPane>
      })
    } else {
      return null
    }
  }
  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNum',
      key: 'orderNum',
      width: "11%"
    },
    {
      title: '来源系统',
      dataIndex: 'sourceSystem',
      key: 'sourceSystem',
      width: "8%",
      render: (text, record) => sourceSystem[text]
    },
    {
      title: '商品列表快照',
      dataIndex: 'coverPath',
      key: 'coverPath',
      width: "10%",
      render: (text, record) => {
        return buildPic(record).map(element => {
          return <img alt="" src={element} height={60} width={60} />
        })
      }
    },
    {
      title: '剩余时间',
      dataIndex: 'surTime',
      key: 'surTime',
      width: "10%",
      render: (text, record, index) => (record.payOrderStatus === "PAID" || !text) ? "" : (1000 * 60 * 60 * 2 - text) <= 0 ? '超时' : parseInt((1000 * 60 * 60 * 2 - text) / 1000 / 60 / 60 % 24) + '时'
        + parseInt((1000 * 60 * 60 * 2 - text) / 1000 / 60 % 60) + '分' + parseInt((1000 * 60 * 60 * 2 - text) / 1000 % 60) + '秒'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: "10%",
      render: (text, record, index) => (moment(record.createTime).format("YYYY-MM-DD"))
    },
    {
      title: '支付成功时间',
      dataIndex: 'paidAt',
      key: 'paidAt',
      width: "10%",
      render: (text, record, index) => (moment(record.paidAt).format("YYYY-MM-DD") === 'Invalid date' ? '无' : moment(record.paidAt).format("YYYY-MM-DD HH:mm:ss"))

    }, {
      title: '收货人姓名',
      dataIndex: 'consigneeName',
      key: 'consigneeName',
      width: "10%",
      render: (text, record, index) => (record.consigneeName + "; " + record.consigneePhoneNum)
    }, {
      title: '数量(件)',
      dataIndex: 'quantity',
      key: 'quantity',
      width: "8%",
      align: "right"
    }, {
      title: '实付金额',
      dataIndex: 'amountInChannelPrice',
      key: 'amountInChannelPrice',
      width: "8%"
    },
    {
      title: '状态',
      dataIndex: 'payOrderStatus',
      key: 'payOrderStatus',
      width: "8%",
      render: (text, record, index) => (<span style={{ color: record.payOrderStatus === "PAID" ? "green" : record.payOrderStatus === "EXPIRED" ? "red" : "" }}>{payOrderStatus[record.payOrderStatus]}</span>)
    },
    {
      title: '操作',
      key: 'handle',
      width: "12%",
      render: (text, record) => (
        <span>
          <a onClick={() => onShowDetail(record)}>详情</a>
        </span>
      )
    }
  ];


  return (
    <div>
      <Modal footer={null} visible={detailVisible} width={800} title={"订单详情"} onCancel={() => {
        dispatch({
          type: 'payOrderList/setCurrentItem',
          payload: {}
        })
        dispatch({
          type: 'payOrderList/closeAllModal'
        })
      }}>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="详细信息" key="1"><DescriptionList
            size="small"
            style={{
              marginBottom: 32
            }}>
            {<Description term="支付订单编码">{currentItem.orderNum}</Description>}
            {<Description term="收货人省份">{currentItem.consigneeProvince}</Description>}
            {<Description term="收货人市">{currentItem.consigneeCity}</Description>}
            {<Description term="收货人区">{currentItem.consigneeDistrict}</Description>}
            {<Description term="收货人地址">{currentItem.consigneeAddress}</Description>}
            {<Description term="收货人电话">{currentItem.consigneePhoneNum}</Description>}
            {<Description term="配送方式">{distributionWay[currentItem.distributionWay]}</Description>}
            {<Description term="商品总数量">{currentItem.quantity}</Description>}
            {<Description term="备注">{currentItem.description}</Description>}
            {<Description term="支付成功时间">{moment(currentItem.paidAt).format("YYYY-MM-DD HH:mm:ss") === 'Invalid date' ? '无' : moment(currentItem.paidAt).format("YYYY-MM-DD HH:mm:ss")}</Description>}
            {<Description term="作废时间">{moment(currentItem.expireAt).format("YYYY-MM-DD HH:mm:ss") === 'Invalid date' ? '无' : moment(currentItem.expireAt).format("YYYY-MM-DD HH:mm:ss")}</Description>}
          </DescriptionList>
          </TabPane>
          {buildTabPane(currentItem.contractGoodsSnapshotSummaries)}
        </Tabs>,


      </Modal>
      <LwjTable
        {...tableProps}
        dispatch={dispatch}
        columns={columns} />
    </div>
  )
};

export default List
